<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>地图</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
		<script type="text/javascript" src="js/echarts.js" ></script>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
		<script type="text/javascript" src="js/bmap/bmap.min.js" ></script>
		<script type="text/javascript" src="js/map-json.js" ></script>
		<script type="text/javascript" src="js/map.js" ></script>
		<style type="text/css">
			html,body,div,img{
				margin: 0px 0px;
				padding: 0px 0px;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.map{
				margin-top:40px;
				width: 100%;
				height: 60%;
			}
			.map .map1{
				width: 60%;
				height: 100%;
				display: inline-block;
			}
			.map .map2{
				width: 30%;
				height: 100%;
				display: inline-block;
			}
			.map .map1 .back{
				margin-left:15px ;
				padding: 8px;
				border-radius:10px;
				border-style: none;
				color:#fff;
				background: #91CA79;
				display: none;
			}
			#map{
				width:100%;
				height:100%;
			}
			#bmap{
				width:100%;
				height:100%;
				display: inline-block;
				background-color: #f00;
			}
			.map .map2 .tooltip{
				position: absolute;
				width: 300px;
				height: 150px;
			}
			.map .map2 .tooltip img{
				width: 100%;
				height:100%;
			}
		</style>
	</head>
	<body>
		
		<div class="map">
				<div class="map1">
					<button class="back" id="back"></button>
					<div id="map">
						
					</div>
				</div>
				<div class="map2">
					<div id="bmap">
						
					</div>
				</div>
		</div>
	</body>
</html>
